<template>
  <view class="container">
    <view class="page-title">种子使用记录</view>
    
    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 种子种类选择 -->
      <view class="form-item">
        <text class="label">种子种类:</text>
        <picker 
          class="picker"
          @change="onSeedTypeChange" 
          :value="selectedSeedTypeIndex" 
          :range="seedTypes"
          range-key="name"
        >
          <view class="picker-view">
            {{ selectedSeedType ? selectedSeedType.name : '请选择种子种类' }}
          </view>
        </picker>
      </view>
      
      <!-- 使用时间选择 -->
      <view class="form-item">
        <text class="label">使用时间:</text>
        <picker 
          class="picker"
          mode="date" 
          :value="useDate" 
          start="2020-01-01" 
          end="2030-12-31"
          @change="onDateChange"
        >
          <view class="picker-view">
            {{ useDate || '请选择使用时间' }}
          </view>
        </picker>
      </view>
      
      <!-- 使用状态选择 -->
      <view class="form-item">
        <text class="label">使用状态:</text>
        <picker 
          class="picker"
          @change="onStatusChange" 
          :value="selectedStatusIndex" 
          :range="statusOptions"
          range-key="name"
        >
          <view class="picker-view">
            {{ selectedStatus ? selectedStatus.name : '请选择使用状态' }}
          </view>
        </picker>
      </view>
      
      <!-- 备注信息 -->
      <view class="form-item">
        <text class="label">备注:</text>
        <textarea 
          class="textarea" 
          placeholder="请输入备注信息"
          v-model="remark"
        ></textarea>
      </view>
      
      <!-- 提交按钮 -->
      <button 
        class="submit-btn" 
        @click="saveRecord"
        :disabled="!canSubmit"
      >
        保存记录
      </button>
    </view>
    
    <!-- 记录列表 -->
    <view class="records-title" v-if="records.length > 0">
      历史记录
    </view>
    
    <view class="records-list">
      <view 
        class="record-item" 
        v-for="(record, index) in records" 
        :key="index"
      >
        <view class="record-info">
          <view class="info-row">
            <text class="info-label">种子种类:</text>
            <text class="info-value">{{ record.seedType.name }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">使用时间:</text>
            <text class="info-value">{{ record.useDate }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">使用状态:</text>
            <text class="info-value" :class="record.status.class">{{ record.status.name }}</text>
          </view>
          <view class="info-row" v-if="record.remark">
            <text class="info-label">备注:</text>
            <text class="info-value">{{ record.remark }}</text>
          </view>
        </view>
        <view class="record-actions">
          <button 
            class="delete-btn" 
            @click="deleteRecord(index)"
          >
            <uni-icons type="trash" size="18" color="#fff"></uni-icons>
          </button>
        </view>
      </view>
      
      <view class="no-record" v-if="records.length === 0">
        暂无记录，请添加种子使用记录
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 种子种类选项
      seedTypes: [
        { id: 1, name: '小麦' },
        { id: 2, name: '玉米' },
        { id: 3, name: '水稻' },
        { id: 4, name: '大豆' },
        { id: 5, name: '棉花' },
        { id: 6, name: '蔬菜' },
        { id: 7, name: '果树' }
      ],
      // 使用状态选项
      statusOptions: [
        { id: 1, name: '已使用', class: 'status-used' },
        { id: 2, name: '储存中', class: 'status-stored' },
        { id: 3, name: '已过期', class: 'status-expired' },
        { id: 4, name: '已损坏', class: 'status-damaged' }
      ],
      
      // 选中的值
      selectedSeedTypeIndex: -1,
      selectedSeedType: null,
      useDate: '',
      selectedStatusIndex: -1,
      selectedStatus: null,
      remark: '',
      
      // 记录列表
      records: []
    };
  },
  
  computed: {
    // 判断是否可以提交
    canSubmit() {
      return this.selectedSeedType && this.useDate && this.selectedStatus;
    }
  },
  
  // onLoad() {
  //   // 页面加载时从本地存储读取数据
  //   this.loadRecords();
  // },
  
  mounted() {
    this.loadRecords();
  
  },
  
  methods: {
    // 从本地存储加载记录
    loadRecords() {
      const records = uni.getStorageSync('seedUsageRecords');
      if (records) {
        this.records = JSON.parse(records);
      }
    },
    
    // 保存记录到本地存储
    saveToStorage() {
      uni.setStorageSync('seedUsageRecords', JSON.stringify(this.records));
    },
    
    // 种子种类选择变化
    onSeedTypeChange(e) {
      const index = e.detail.value;
      this.selectedSeedTypeIndex = index;
      this.selectedSeedType = this.seedTypes[index];
    },
    
    // 日期选择变化
    onDateChange(e) {
      this.useDate = e.detail.value;
    },
    
    // 状态选择变化
    onStatusChange(e) {
      const index = e.detail.value;
      this.selectedStatusIndex = index;
      this.selectedStatus = this.statusOptions[index];
    },
    
    // 保存记录
    saveRecord() {
      if (!this.canSubmit) return;
      
      // 创建新记录
      const newRecord = {
        id: Date.now(), // 使用时间戳作为唯一ID
        seedType: this.selectedSeedType,
        useDate: this.useDate,
        status: this.selectedStatus,
        remark: this.remark,
        createTime: new Date().toLocaleString()
      };
      
      // 添加到记录列表
      this.records.unshift(newRecord);
      
      // 保存到本地存储
      this.saveToStorage();
      
      // 重置表单
      this.resetForm();
      
      // 提示保存成功
      uni.showToast({
        title: '记录保存成功',
        icon: 'success',
        duration: 2000
      });
    },
    
    // 重置表单
    resetForm() {
      this.selectedSeedTypeIndex = -1;
      this.selectedSeedType = null;
      this.useDate = '';
      this.selectedStatusIndex = -1;
      this.selectedStatus = null;
      this.remark = '';
    },
    
    // 删除记录
    deleteRecord(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这条记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.records.splice(index, 1);
            this.saveToStorage();
            uni.showToast({
              title: '记录已删除',
              icon: 'none',
              duration: 2000
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 24px;
  color: #333;
}

.form-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.picker {
  width: 100%;
  height: 44px;
  line-height: 44px;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 0 12px;
  background-color: #fff;
}

.picker-view {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

.textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.submit-btn {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: #007aff;
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  margin-top: 10px;
}

.submit-btn:disabled {
  background-color: #ccc;
}

.records-title {
  font-size: 16px;
  font-weight: bold;
  margin: 16px 0;
  color: #333;
  padding-left: 4px;
  border-left: 3px solid #007aff;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.record-info {
  flex: 1;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-label {
  color: #666;
  width: 80px;
}

.info-value {
  color: #333;
  flex: 1;
  word-break: break-word;
}

.status-used {
  color: #00b42a;
}

.status-stored {
  color: #007aff;
}

.status-expired {
  color: #ff7d00;
}

.status-damaged {
  color: #f53f3f;
}

.record-actions {
  margin-left: 10px;
}

.delete-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f53f3f;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.no-record {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 14px;
  background-color: #fff;
  border-radius: 8px;
}
</style>
